<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" href="./iconfont/iconfont.css">
	</head>
	<body>
		<div class="nav">
			<div class="nav-content">
				<div class="clearfix" id="nav-left">
					<div class="item listitem">
						<i class="iconfont icon-map" style="color: red;"></i>
						<a href="#">浙江</a>
					</div>
					<div class="city-list">
						
					</div>
				</div>
				<div class="clearfix" id="nav-right">
					<ul>
						<li>
							<span>|</span>
							<div class="item">
								<a href="#">手机京东</a>
							</div>
						</li>
						<li>
							<span>|</span>
							<div class="item listitem">
								<a href="#">网页导航</a>
								<i class="iconfont icon-arrow-down" style="font-size: 2px;"></i>
								<div class="list5"></div>
							</div>
						</li>
						<li>
							<span>|</span>
							<div class="item listitem">
								<a href="#">客户服务</a>
								<i class="iconfont icon-arrow-down" style="font-size: 2px;"></i>
								<div class="list4"></div>
							</div>
						</li>
						<li>
							<span>|</span>
							<div class="item listitem">
								<a href="#" class="importanthref">企业采购</a>
								<i class="iconfont icon-arrow-down" style="font-size: 2px;"></i>
								<div class="company-list"></div>
							</div>
						</li>
						<li>
							<span>|</span>
							<div class="item">
								<a href="#">京东会员</a>
							</div>
						</li>
						<li>
							<span>|</span>
							<div class="item listitem">
								<a href="#">我的京东</a>
								<div class="mine-list"></div>
							</div>
						</li>
						<li>
							<span>|</span>
							<div class="item">
								<a href="#">我的订单</a>
							</div>
						</li>
						<li>
							<div class="item">
								<a href="#" class="importanthref">免费注册</a>
							</div>
						</li>
						<li>
							<div class="item">
								<a href="#">你好，请登录</a>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	var items = document.getElementsByClassName("item")
	var cityList = document.getElementsByClassName("city-list")[0]
	items[0].onmousemove = function(){
		cityList.style.display = "inline";
	}
	items[0].onmouseleave = function(){
		cityList.style.display = "none"
	}
</script>
<style type="text/css">
	li{
		float: right;
	}
	span{
		margin: 0 5px;
	}
	i{
		vertical-align: top;
	}
	a:link{
		color: #999999;
	}
	a:visited{
		color: #999999;
	}
	a:hover{
		color: #FF0000;
	}
	.nav{
		width:auto;
		height: 30px;
		background-color: #E3E4E5;
	}
	.nav-content{
		width: 1190px;
		height: 30px;
		line-height: 30px;
		margin: 0px auto;
	}
	.item{
		float: right;
		padding: 0 7px;
	}
	.clearfix::before,.clearfix::after{
		content: '';
		display: table;
		clear: right;
	}
	.importanthref:link{
		color: #FF0000;
	}
	.importanthref:visited{
		color: #FF0000;
	}
	.listitem:hover{
		background-color: #fff;
	}
	#nav-left,#nav-right{
		/* border: 1px solid; */
		font-size: 12px;
		color: #999999;
	}
	#nav-left{
		float: left;
	}
	.city-list,.mine-list,.company-list,.list4,.list5{
		outline: 1px solid #E3E4E5;
		position: absolute;
		top: 30px;
		box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
		display: none;
		background-color: #f2f2f2;
	}
	.city-list{
		width: 322px;
		height: 464px;
	}
	.mine-list{
		width: 280px;
		height: 150px;
		margin-left: -6px;
	}
	.company-list{
		width: 142px;
		height: 157px;
		margin-left: -6px;
	}
	.list4{
		width: 172px;
		height: 273px;
		margin-left: -6px;
	}
	.list5{
		width: 1190px;
		height: 181px;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	.listitem:hover > .mine-list{
		display: block;
	}
	.listitem:hover > .company-list{
		display: block;
	}
	.listitem:hover > .list5{
		display: block;
	}
	.listitem:hover > .list4{
		display: block;
	}
</style>
